<template>
    <div class="login-bg">
        <a-form
            class="login"
            :model="form"
            :label-col="{ span: 4 }"
            :wrapper-col="{ span: 20 }"
            autocomplete="off"
            @finish="onFinish"
        >
            <div class="title">{{ configs.name }}</div>
            <a-form-item
                labelAlign="left"
                :colon="false"
                label="用户名"
                name="username"
                :rules="[{ required: true, message: ' ' }]"
            >
                <a-input v-model:value="form.username"/>
            </a-form-item>

            <a-form-item
                labelAlign="left"
                :colon="false"
                label="密码"
                name="password"
                :rules="[{ required: true, message: ' ' }]"
            >
                <a-input-password v-model:value="form.password"/>
            </a-form-item>

            <div class="justify-center">
                <a-button type="primary" html-type="submit">登录</a-button>
            </div>
        </a-form>
    </div>
</template>

<script>
import router from "@/route/index";

export default {
    name: 'loginComponent',
    data: function () {
        return {
            form: {
                username: 'admin',
                password: 'admin',
            },
            configs: {}
        };

    },
    created() {
        this.getConfigs()
    },
    methods: {
        getConfigs() {
            this.get('/index/index/configs').then(({code, configs}) => {
                if (code === 1) {
                    this.configs = configs
                }
            })
        },
        onFinish() {
            this.post('/admin/index/login', this.form).then(({code, msg, token, username}) => {
                if (code === 1) {
                    this.loading('登录成功！正在跳转...', 1.5)
                    localStorage.setItem('token', token)
                    localStorage.setItem('username', username)
                    setTimeout(() => {
                        router.push('/home')
                    }, 1500)
                }
            })
        }
    }
}
</script>

<style scoped lang="less">
.title {
    margin-bottom: 20px;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
}

.login-bg {
    background: url(@/assets/img/login-bg.jpg) no-repeat center;
    height: 100vh;
    padding-top: 18%;

    .login {
        margin: 0 auto;
        max-width: 420px;
        padding: 20px;
        background-color: #ffffff;

    }
}
</style>